<template>
	<!-- 顶部个人信息区域 -->
	<view class="container">
		<!-- 头部背景 -->
		<view class="header-bg"></view>

		<!-- 个人信息卡片 -->
		<view class="user-info-card">
			<view class="avatar-container">
				<image :src="userAvatar" mode="aspectFill" class="avatar"></image>
			</view>
			<view class="user-info">
				<view class="user-name-container">
					<text class="user-name" @click="tologin">{{user.userName }}</text>
					<!-- <button class="settings-btn" @tap="goToOrder('setting')">
            <image src="https://img95.699pic.com/element/40125/3373.png_300.png" mode="aspectFit" class="settings-icon"></image>
          </button> -->
				</view>
				<text class="vip-tag" v-show="user.role!=null || user.role!=undefined">{{user.role}}</text>
			</view>
		</view>

		<!-- 数据统计区域 -->
		<view class="data-stats">
			<view class="stat-item">
				<text class="stat-label">我的积分</text>
				<text class="stat-value">{{user.point}}</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-label">账户余额</text>
				<text class="stat-value">¥{{user.money}}</text>
			</view>
		</view>

		<!-- 订单区域 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<button class="all-orders-btn" @tap="goToOrder('all_order')">全部订单 ></button>
			</view>

			<view class="order-status">
				<view class="status-item" @tap="goToOrder('pending_payment')">
					<image src="http://172.172.9.57:9999/myself/待付款.png" mode="aspectFit" class="status-icon"></image>
					<text class="status-text">待付款</text>
				</view>
				<!-- <view class="status-item" @tap="goToOrder('pending_shipment')">
          <image src="http://172.172.9.57:9999/myself/代发货.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">待发货</text>
        </view>
        <view class="status-item" @tap="goToOrder('pending_receipt')">
          <image src="http://172.172.9.57:9999/myself/待收货.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">待收货</text>
        </view> -->
				<view class="status-item" @tap="goToOrder('completed')">
					<image src="http://172.172.9.57:9999/myself/已完成.png" mode="aspectFit" class="status-icon"></image>
					<text class="status-text">已完成</text>
				</view>
				<!--  <view class="status-item" @tap="goToOrder('after_sale')">
          <image src="http://172.172.9.57:9999/myself/售后.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">退款/售后</text>
        </view> -->
			</view>
		</view>

		<view class="service-section">
			<!-- 区域标题 -->
			<view class="section-header">
				<text class="section-title">我的服务</text>
			</view>

			<!-- 功能卡片网格 -->
			<view class="service-grid">
				<!-- 我的收藏卡片 -->
				<view class="service-card" @tap="goToOrder('my_favorites')" @touchstart="handleTouchStart"
					@touchend="handleTouchEnd">
					<view class="card-icon">
						<image src="/static/tabs/VedioSelect.png" mode="aspectFit" class="icon-img"></image>
					</view>
					<text class="card-text">我的收藏</text>
				</view>

				<!-- 我的课程卡片 -->
				<view class="service-card" @tap="goToOrder('my_classes')" @touchstart="handleTouchStart"
					@touchend="handleTouchEnd">
					<view class="card-icon">
						<image src="/static/tabs/VedioSelect.png" mode="aspectFit" class="icon-img"></image>
					</view>
					<text class="card-text">我的课程</text>
				</view>

				<view class="service-card" @tap="goToOrder('setting')" @touchstart="handleTouchStart"
					@touchend="handleTouchEnd">
					<view class="card-icon">
						<image src="https://img95.699pic.com/element/40125/3373.png_300.png" mode="aspectFit"
							class="icon-img"></image>
					</view>
					<text class="card-text">系统设置</text>
				</view>

				<!-- 可扩展的其他功能卡片占位 -->
				<view class="service-card placeholder-card" v-if="false">
					<view class="card-icon">
						<image src="" mode="aspectFit" class="icon-img"></image>
					</view>
					<text class="card-text">功能名称</text>
				</view>
				<view class="service-card placeholder-card" v-if="false">
					<view class="card-icon">
						<image src="" mode="aspectFit" class="icon-img"></image>
					</view>
					<text class="card-text">功能名称</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, watchEffect,nextTick } from 'vue';
	import { ref, computed } from 'vue';
	import { useUserStore } from '@/stores/api.js'
	import { navigateToLogin } from '@/components/navigateTo.js'
	const userStore = useUserStore();
	// 页面加载完成后执行
	onMounted(() => {
		console.log('个人中心页面已加载', userStore, "--", userStore.getUserId);
		console.log(userStore)
		nextTick(()=>{
			if (userStore.getUserId) {
				user.userName = userStore.getUserName;
				user.imgPath = userStore.getImgPath;
				user.point = userStore.getPoints;
				user.money = userStore.getMoney;
			}
		})
		
		getMyself();

	});
	// 监听 store 变化，自动同步数据
	watchEffect(() => {
		// 当 userInfo 变化时，这里会自动执行
		user.userName = userStore.getUserName || "请先登录";
		user.imgPath = userStore.getImgPath;
		user.role = userStore.getRole;
		user.point = userStore.getPoints || "-";
		user.money = userStore.getMoney || "-";

		console.log('用户信息已更新:', user);
	})
	function getMyself() {
		user.userName = userStore.getUserName || "游客", //用户名
			user.imgPath = userStore.getImgPath, //用户头像
			user.role = userStore.getRole || "--",//用户权限信息
			user.point = userStore.getPoints || "--", //用户积分
			user.money = userStore.getMoney || "--"
	};
	let user = reactive({
		userName: '',
		imgPath: '',
		role: '',
		point: null,
		money: null
	})
	// 计算属性处理图片路径
	const userAvatar = computed(() => {
		// 如果有用户自定义图片路径，使用它；否则使用默认图片
		return user.imgPath || 'http://172.172.9.57:9999/myself/x_头像.png';
	});
	function tologin() {
		navigateToLogin('是否前往登录')
	}
	// 跳转到订单详情
	const goToOrder = (status : string) => {
		console.log(`跳转到${status}订单页面`);

		uni.navigateTo({
			url: `/pages/${status}/${status}`
		});
	};

	// 新增交互逻辑
	const handleTouchStart = (e) => {
		const card = e.currentTarget;
		card.classList.add('touch-active');
	};

	const handleTouchEnd = (e) => {
		const card = e.currentTarget;
		card.classList.remove('touch-active');
	};
</script>

<style>
	/* 基础颜色定义 - 薄荷绿主题 */
	:root {
		--primary-color: #98D7C2;
		/* 主色调 - 浅薄荷绿 */
		--primary-dark: #6AA78F;
		/* 主色深色 */
		--secondary-color: #E8F5F0;
		/* 次要色 - 薄荷绿背景 */
		--text-color: #333333;
		/* 文本主色 */
		--text-light: #666666;
		/* 文本次色 */
		--border-color: #E0E0E0;
		/* 边框色 */
		--bg-white: #FFFFFF;
		/* 白色背景 */
	}

	/* 容器样式 */
	.container {
		/* background-color: var(--secondary-color); */
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	/* 头部背景 */
	.header-bg {
		height: 300rpx;
		background: linear-gradient(1deg, #b3cee5, #007ce46e);
		position: relative;
		z-index: 1;
	}

	/* 个人信息卡片 */
	.user-info-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: var(--bg-white);
		border-radius: 20rpx;
		margin: -100rpx 30rpx 0;
		position: relative;
		z-index: 2;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid var(--primary-color);
	}

	.avatar {
		width: 100%;
		height: 100%;
		background-color: #6AA78F;
	}

	.user-info {
		margin-left: 20rpx;
	}

	/* 新增：用户名容器样式 */
	.user-name-container {
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		color: var(--text-color);
		display: block;
		margin-bottom: 10rpx;
	}

	/* 新增：设置按钮样式 */
	.settings-btn {
		padding: 0;
		margin: 0 0 10rpx 10rpx;
		border: none;
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.settings-icon {
		width: 30rpx;
		height: 30rpx;
		opacity: 0.7;
	}

	.settings-btn:hover .settings-icon {
		opacity: 1;
		transform: rotate(45deg);
		transition: transform 0.3s ease;
	}

	.vip-tag {
		font-size: 24rpx;
		color: #FF9800;
		background-color: #FFF3E0;
		padding: 4rpx 16rpx;
		border-radius: 30rpx;
	}

	/* 数据统计区域 */
	.data-stats {
		display: flex;
		background-color: var(--bg-white);
		border-radius: 20rpx;
		margin: 20rpx 30rpx;
		padding: 30rpx 0;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		text-align: center;
		padding: 0 20rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: var(--text-light);
		display: block;
		margin-bottom: 10rpx;
	}

	.stat-value {
		font-size: 32rpx;
		font-weight: bold;
		color: var(--primary-dark);
	}

	.stat-divider {
		width: 2rpx;
		background-color: var(--border-color);
		margin: 0 10rpx;
	}

	/* 订单区域 */
	.order-section {
		background-color: var(--bg-white);
		border-radius: 20rpx;
		margin: 0 30rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid var(--border-color);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: var(--text-color);
	}

	.all-orders-btn {
		font-size: 24rpx;
		color: var(--primary-dark);
		padding: 0;
		margin: 0;
		line-height: 1;
		background-color: transparent;
		border: none;
	}

	.order-status {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
		padding: 20rpx 0;
	}

	.status-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.status-text {
		font-size: 24rpx;
		color: var(--text-color);
	}

	.settings-btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.settings-icon {
		width: 100%;
		height: 100%;
		mode: cover
	}

	/* 功能区域美化样式 */
	.service-section {
		background-color: var(--bg-white);
		border-radius: 20rpx;
		margin: 0 30rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.service-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
	}

	.service-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
		padding: 30rpx 0;
		position: relative;
		transition: all 0.3s ease;
	}

	.service-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 10rpx 20rpx rgba(152, 215, 194, 0.3);
	}

	.service-card.touch-active {
		transform: scale(0.98);
	}

	.card-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: var(--secondary-color);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 1;
	}

	.icon-img {
		width: 50rpx;
		height: 50rpx;
	}

	.card-text {
		font-size: 24rpx;
		color: var(--text-color);
		text-align: center;
	}

	/* 占位卡片样式（用于扩展） */
	.placeholder-card {
		opacity: 0.5;
	}
</style>